// FloatBox 悬浮球样式
.float-box-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  // 悬浮球样式
  .float-ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
    }
    
    &.dragging {
      transform: scale(1.05);
      box-shadow: 0 8px 30px rgba(102, 126, 234, 0.8);
      cursor: grabbing;
    }
    
    &.expanded {
      background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    }
    
    .float-ball-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      
      .ant-badge {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  // 工具面板样式
  .float-panel {
    animation: slideIn 0.3s ease-out;
    
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    .float-panel-card {
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(0, 0, 0, 0.1);
      overflow: hidden;
      
      .ant-card-head {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding: 12px 16px;
        min-height: 48px;
        
        .ant-card-head-title {
          padding: 0;
          color: white;
          font-size: 14px;
          font-weight: 600;
        }
        
        .ant-card-extra {
          padding: 0;
          
          .ant-btn {
            color: rgba(255, 255, 255, 0.8);
            border: none;
            background: transparent;
            
            &:hover {
              color: white;
              background: rgba(255, 255, 255, 0.15);
              transform: scale(1.1);
            }
          }
        }
      }
      
      .ant-card-body {
        padding: 16px;
        
        .tool-content {
          .ant-input,
          .ant-select {
            border-radius: 6px;
            border: 1px solid #e1e5e9;
            
            &:hover {
              border-color: #667eea;
            }
            
            &:focus,
            &.ant-select-focused {
              border-color: #667eea;
              box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
            }
          }
          
          .ant-btn {
            border-radius: 6px;
            transition: all 0.2s ease;
            
            &.ant-btn-primary {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border: none;
              
              &:hover {
                background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
              }
            }
            
            &:not(.ant-btn-primary) {
              &:hover {
                border-color: #667eea;
                color: #667eea;
              }
            }
          }
          
          .ant-typography {
            margin: 0;
          }
        }
        
        .ant-select-dropdown {
          border-radius: 8px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}

// 确保悬浮球在最顶层
.float-box-container {
  z-index: 2147483647 !important; // 最大 z-index 值
  
  .float-ball {
    z-index: 2147483647 !important;
  }
  
  .float-panel {
    z-index: 2147483646 !important;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .float-box-container {
    .float-ball {
      width: 50px;
      height: 50px;
      
      .float-ball-inner {
        .anticon {
          font-size: 20px !important;
        }
      }
    }
    
    .float-panel {
      width: calc(100vw - 80px) !important;
      max-width: 300px;
      
      .float-panel-card {
        .ant-card-head {
          .ant-card-head-title {
            font-size: 13px;
          }
        }
        
        .ant-card-body {
          padding: 12px;
        }
      }
    }
  }
}

// 暗黑模式支持
@media (prefers-color-scheme: dark) {
  .float-box-container {
    .float-panel {
      .float-panel-card {
        background: rgba(30, 30, 30, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        
        .ant-card-body {
          .tool-content {
            .ant-input,
            .ant-select {
              background: rgba(255, 255, 255, 0.05);
              border-color: rgba(255, 255, 255, 0.2);
              color: white;
              
              &::placeholder {
                color: rgba(255, 255, 255, 0.6);
              }
            }
            
            .ant-typography {
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }
      }
    }
  }
}

// 动画效果
.float-ball {
  animation: float 3s ease-in-out infinite;
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  
  &:hover {
    animation-play-state: paused;
  }
  
  &.dragging {
    animation: none;
  }
}